<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event</title>
    <style>
        .big{
            width: 300px;
            height: auto;
        }

        #small img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div>
    <img src="img/bu.jpg" class="big"/>
</div>

<div id="small">
    <img src="img/bu.jpg"  id="bu"/>
    <img src="img/hu.jpg" id="hu"/>
    <img src="img/ju.jpg" id="ju"/>
</div>
<script>
 var imgs=document.getElementsByTagName('img');
 for (var i = 1; i < imgs.length; i++) {
     imgs[i].addEventListener('mouseover',function () {
             console.log(imgs[i])
            imgs[0].src=imgs[i].src;
     })
 }
</script>
</body>
</html>